<template>
    <div id="editor">

    </div>
</template>

<script>
import E from "wangeditor";
export default {
  model: {
    prop: "text",
    event: "Upload"
  },
  props: {
    text: String,
    disabled: Boolean
  },
  data() {
    return {
      content: this.text,
      editor: null
    };
  },
  watch: {
    text: {
      handler(newVal) {
        this.content = newVal;
        this.editor.txt.html(this.content);
      }
    },
    disabled: {
      handler(newVal) {
        this.$nextTick(() => {
          if (newVal) {
            this.editor.disable();
          } else {
            this.editor.enable();
          }
        });
      },
      immediate: true
    }
  },

  mounted() {
    this.editor = new E("#editor");
    this.editor.config.onchange = newHtml => {
      this.content = newHtml;
      this.$emit("Upload", this.content);
    };
    this.editor.create();
  }
};
</script>

<style scoped>
</style>